<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS Test: height:auto on region box when used width changes between Step 1 and Step 2</title>
    <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
    <link rel="help" href="http://dev.w3.org/csswg/css3-regions/#rfcb-flow-fragment-height-resolution"/>
    <link rel="match" href="regions-auto-size-5-ref.xht"/>
    <meta name="flags" content=""/>
    <meta name="assert" content=
    "The height of region rC should be 'too large' because the flow fragment height in Step 1 Phase 2 is computed on a width 
    that is different from that used for the Step 2 region box layout. In Step 1 Phase 2, region rC has a used width of 50% 
    of its containing block. But has a width of 100% of its containing block during the Step 2 region box layout. As a consequence,
    during Step 3, the flow content fits in a smaller height and there is extra space at the end of the region box. This is an 
    edge case but this test validates the expected behavior."/>
    <style>
    /*<![CDATA[*/
    
body {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#article {
    -webkit-flow-into: article;
}

#article .line {
    display: inline-block;
    background: #a0a0a0;
    width: 250px;
    height: 25px;
}

#article .long.line {
    width: 900px;
    background: #505050;
}

#rA, #rB, #rC {
    -webkit-flow-from: article;
    padding: 0em;
    box-sizing: border-box;
    border: 3px solid #46A4E9;
    border-radius: 0.5em;
}

#rA {
    float: left;
    width: 50%;
    max-height: 100px;
    min-height: 50px;
}

#rB {
    float: right;
    width: 50%;
    max-height: 100px;
}

#rC {
     display: table-cell;
     height: auto;
     width: auto;
}
/*]]>*/
</style>
</head>
<body>
    <p>You should see three blue boxes. The top two ones are of equal width and contain
        three dark gray line boxes. The bottom blue box should contain three columns of 
        line boxes, each with 2 line boxes. The bottom blue box should be three times as 
        high as its line box content height. The bottom blue box should be as wide as 
        the top two blue boxes combined.</p>
        
    <div id="article">
        <!-- rA -->
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        
        <!-- rB -->
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        
        <!-- rC -->
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
	<div id="rA"></div>
	<div id="rB"></div>
	<div id="rC"></div>
</body>
</html>